<!-- 热门知识 -->
<template>
  <div v-loading="loading">
    <ProTable
      ref="proTable"
      :columns="columns"
      :data="list"
      row-key="kid"
      :tool-button="false"
      :pagination="false"
      max-height="500"
    >
      <!-- 标题 -->
      <template #title="scope">
        <el-link type="primary" @click="seeDetails(scope.row)">{{ scope.row.title }}</el-link>
      </template>
    </ProTable>
    <!-- 知识详情弹窗 -->
    <DetailsMask ref="detailsMask"></DetailsMask>
  </div>
</template>

<script setup lang="ts" name="PagePersonalTasksBox">
import { ref, reactive } from "vue";
import ProTable from "@/components/ProTable/index.vue";
import DetailsMask from "@/components/Index/Knowledge/DetailsMask.vue";
import { findPopularKnowledge } from "@/api/modules/index";
import { useUserStore } from "@/stores/modules/user";

const userStore = useUserStore();

// 表格配置项
const columns = reactive([
  { prop: "categoryName", label: "分类", width: "140" },
  { prop: "title", label: "名称" },
  { prop: "content", label: "内容" }
]);

const list = ref<any[]>([]);
const loading = ref(true);

findPopularKnowledge({
  loginName: userStore.username
})
  .then((res: any) => {
    loading.value = false;
    list.value = res.list || [];
  })
  .catch(() => {
    loading.value = false;
  });

// 查看知识详情
const detailsMask = ref();
const seeDetails = item => {
  detailsMask.value?.open(item);
};
</script>

<style scoped lang="scss">
:deep(.card) {
  padding: 10px;
  border: none;
}
</style>
